<template>
  <div class="pageWrap">
    <el-tabs v-model="HotAct" @tab-click="getHotArr" class="setCon">
      <el-tab-pane label="热门赛事" name="1">
        <el-button type="primary" @click="addHot(1)">添加</el-button>
      </el-tab-pane>
      <el-tab-pane label="热门活动" name="2">
        <el-button type="primary" @click="addHot(2)">添加</el-button>
      </el-tab-pane>
      <el-tab-pane label="今日推荐" name="3">
        <el-button type="primary" @click="addHot(3)">添加</el-button>
      </el-tab-pane>
    </el-tabs>
    <el-table :data="HotData" row-key="uid" class="hotData">
      <el-table-column :label="HotAct==1?'赛事图片':HotAct==2?'活动图片':'商品图片'">
        <template slot-scope="{row}">
          <img v-if="row.logo" :src="row.logo"  alt class="hotImgS" />
          <img v-else-if="row.banner" :src="row.banner" alt class="hotImgS" />
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="300">
        <template slot-scope="{row}">
          <el-select v-model="row.id" placeholder="请选择" filterable clearable @change="chooseHot(row)">
            <el-option v-for="item in hotSetArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="时间" v-if="HotAct!=3"></el-table-column>
      <el-table-column prop="actPrice" label="价格" v-if="HotAct==3"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="{$index}">
          <el-button type="" icon="el-icon-top" circle @click="goPrev($index)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="HotData.splice($index,1)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="saveHot">保存设置</el-button>
  </div>
</template>

<script>
var matchArr = [];
var shopArr = [];
import Sortable from "sortablejs";
export default {
  data() {
    return {
      HotData: [],
      HotAct: "1",
      hotSetArr: [],
    };
  },
  methods: {
    // 向前挪一位
    goPrev(i) {
      if (i == 0) {
        return false;
      }
      let vv = this.HotData.splice(i, 1)[0];
      this.HotData.splice(i - 1, 0, vv);
    },
    // banner 获取赛事与商品
    getMorS() {
      this.$axios.get("/sbr/match/getMatchBanner").then((res) => {
        let rr = res.data.data;
        matchArr = rr;
        this.$axios.get("/sbr/shop/getShopKuPic").then((res) => {
          let rr = res.data.data;
          shopArr = rr;
          this.getHotArr();
        });
      });
    },
    // 热门 行拖拽
    rowDropHot() {
      const tbody = document.querySelector(
        ".hotData .el-table__body-wrapper tbody"
      );
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.HotData.splice(oldIndex, 1)[0];
          _this.HotData.splice(newIndex, 0, currRow);
        },
      });
    },
    // 热门设置
    addHot(i) {
      // if(i==1||i==2){
      //   if(this.HotData.length>=4){
      //     this.$message.warning('热门赛事/活动最多可添加4个')
      //     return false
      //   }
      // }
      if (i != 3) {
        this.HotData.push({
          logo: "",
          id: "",
          name: "",
          date: "",
        });
      } else {
        this.HotData.push({
          logo: "",
          id: "",
          name: "",
          actPrice: "",
        });
      }
    },
    getHotArr() {
      this.HotData = [];
      if (this.HotAct == 1) {
        this.hotSetArr = matchArr.filter((v) => {
          return v.type == "S";
        });
      } else if (this.HotAct == 2) {
        this.hotSetArr = matchArr.filter((v) => {
          return v.type == "H";
        });
      } else {
        this.hotSetArr = shopArr;
      }
      // console.log(this.hotSetArr)
      this.getHotData();
    },
    chooseHot(row) {
      // console.log(row.id);
      if (row.id) {
        let val = this.hotSetArr.find((v) => {
          return v.id == row.id;
        });
        if (val) {
          row.name = val.name;
          if (this.HotAct == 3) {
            row.logo = val.banner;
            row.actPrice = val.actPrice;
          } else {
            row.date = val.matchDate + " ~ " + val.matchEndDate;
            row.logo = val.logo;
          }
        }
      } else {
        // console.log(111);
        if (this.HotAct != 3) {
          // console.log(222);
          row.logo = "";
          row.name = "";
          row.date = "";
        } else {
          // console.log(222);
          row.logo = "";
          row.name = "";
          row.actPrice = "";
        }
        this.$forceUpdate();
      }
    },
    saveHot() {
      let ids = this.HotData.map((v) => {
        if (v.id) {
          return v.id;
        }
      });
      if (ids.length == 0) {
        this.$message.error("请选择");
        return false;
      }
      let oo = {
        type: this.HotAct,
        ids: this.$Base64.encode(ids.join(",")),
      };
      this.$axios.post("/sbr/match/putMatchHot", oo).then((res) => {
        this.$message.success('保存成功')
      });
    },
    getHotData() {
      this.$axios
        .get("/sbr/match/getMatchHot?type=" + this.HotAct)
        .then((res) => {
          let rr = res.data.data;
          rr.forEach(v=>{
            v.date = v.matchDate + " ~ " + v.matchEndDate;
          })
          this.HotData = rr;
        });
    },
  },
  mounted() {
    let that = this;
    setTimeout(() => {
      that.rowDropHot();
    }, 100);
    this.getMorS();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.hotImgS {
  width: 150px;
  height: 150px;
}
</style>